<template>
	<div class="table-box">
		{{ formData }}
		<div>
			<el-button @click="validate">validate</el-button>
			<el-button @click="cForm.reset()">reset</el-button>
			<el-button @click="cForm.onSubmit()">onSubmit</el-button>
		</div>

		<CForm
			ref="cForm"
			v-model="formData"
			label-width="160px"
			:itemList="itemList"
			:apiInit="apiInit"
			:apiSubmit="getUserList"
			:initQueryEnable="true"
			@loading-change="loadingChange"
		>
			<template #prop_listList_item_item="{ item, data, prop }"> {{ data }} / {{ prop }} / {{ item.label }}</template>
		</CForm>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { FormItemProps } from '@/components/CForm/interface'
import CForm from '@/components/CForm/index.vue'
import { getUserList } from '@/api/modules/user'
import dict from '@/utils/dict/index'
const formData = ref<Record<string, any>>({
	abc: '',
	username: '1',
	users: [{}],
	roles: []
})
const cForm = ref()
function loadingChange(val: boolean) {
	console.log('loadingChange', val)
}

function validate() {
	cForm.value.validate()
}

function apiInit() {
	return Promise.resolve({
		id: '8',
		username: '罗超',
		gender: 2,
		age: 88,
		idCard: '37',
		email: 'q.tpjsaly@qq.com',
		address: '江苏省锦州市渝中区',
		createTime: '1982-01-04 11:39:36',
		user: {
			name: 'a'
		},
		users: [
			{
				name: 'a'
			}
		],
		roles: [],
		listList: [['admin']],
		status: 1,
		avatar: 'https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220728110032.jpg'
	})
}
// 表单配置项
const itemList: FormItemProps[] = [
	{
		prop: 'username',
		label: '用户姓名',
		rules: [{ required: true, message: '不能为空' }]
	},

	{
		prop: 'gender',
		label: '性别',
		compType: 'select',
		span: 12,
		isNewLine: true,
		alert: '性别 alert',
		// dict: getUserGender
		dict: dict.gender_type.value
	},
	{ prop: 'idCard', label: '身份证号', isNewLine: true, span: 12 },
	{ prop: 'email', label: '邮箱', span: 12 },
	{ prop: 'address', label: '居住地址' },
	{
		prop: 'users',
		label: '用户列表',
		compType: 'array',
		span: 24,
		// isShow: ({formData}) => {
		// 	return formData.status === 0
		// },
		itemInfo: {
			compType: 'object',
			span: 12,
			itemInfo: [
				{
					prop: 'name',
					label: '列表 item用户名',
					rules: [{ required: true, message: '不能为空' }],
					compDefault: 'a',
					span: 24
				},
				{
					prop: 'age',
					label: '列表 item年龄',
					compDefault: 'age',
					isHideWipeData: false,
					span: 24,
					isShow: ({ data }) => {
						return data.name === 'a'
					}
				}
			]
		}
	},
	{
		prop: 'user',
		label: '用户',
		compType: 'object',
		itemInfo: [
			{
				prop: 'name',
				compDefault: '张三',
				rules: [{ required: true, message: '不能为空' }],
				label: '用户名'
			}
		]
	},
	{
		prop: 'status',
		label: '用户状态',
		compType: 'select',
		dict: 'user_status'
		// dict: dict.user_status.value
		// comInitParam: { labelName: 'userLabel', valueName: 'userStatus' }
	},
	{
		prop: 'roles',
		label: '角色',
		compDefault: ['aaa', 'bbb'],
		isShow: ({ formData }) => {
			return formData.status === 1
		},
		rules: [{ required: true, message: '不能为空' }],
		span: 12,
		compType: 'array',
		// 对象表示单元素，数组表示对象
		itemInfo: {
			label: '',
			labelWidth: '20px',
			compType: 'input',
			span: 8,
			rules: [{ required: true, message: '不能为空' }],
			compDefault: 'abc'
		}
	},
	{
		prop: 'createTime',
		// isShow: ({ formData }) => {
		// 	return formData.status === 1
		// },
		label: '创建时间',
		compType: 'datetime',
		compProps: {
			// disabledDate: (time: Date) => time.getTime() < Date.now() - 8.64e7
		},
		// compDefault: '2022-09-30 23:59:59',
		rules: [{ required: true, message: '不能为空' }]
	},
	{
		prop: 'listList',
		label: 'listList',
		compType: 'array',
		itemInfo: {
			compType: 'array',
			label: '第一级',
			labelWidth: '80px',
			itemInfo: {
				label: '第二级',
				labelWidth: '80px',
				rules: [{ required: true, message: '不能为空' }],
				compType: 'input',
				compDefault: '111'
			}
		}
	}
]
</script>
